<template>
  <div>
    <div class="detail-page">
      <div class="header-area">
        <div class="title">{{ detail.title }}</div>
        <div class="article-info">
          <div class="other-info">
            <div class="time">
              <span>{{
                detail.createdTime | format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <editor-detail :content="detail.textContent" />
    </div>
  </div>
</template>
<script>
import EditorDetail from '@/components/editor-detail/index.vue'
import { getAnnounceDetail } from '@/api/operate'
export default {
  name: 'ArticleDetail',
  components: { EditorDetail },
  data: () => {
    return {
      detail: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  created() {},
  methods: {
    async getDetail() {
      try {
        const res = await getAnnounceDetail({
          id: this.$route.params.id
        })
        if (res) {
          this.detail = res
        }
      } catch (err) {
        console.log('接口出错')
      }
    }
  }
}
</script>
<style scoped>
/* 全部评论列表 */
.detail-page {
  background: #fff;
  padding: 32px;
  border-radius: 4px;
}
.header-area .title {
  font-size: 30px;
  font-weight: 700;
  word-break: break-word;
  margin-bottom: 0.5em;
}
.header-area .article-info {
  display: table;
  vertical-align: middle;
  margin-bottom: 32px;
}
.header-area .article-info .img-area {
  display: table-cell;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.header-area .article-info .img-area img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.header-area .article-info .other-info {
  display: table-cell;
  margin-right: 8px;
  vertical-align: middle;
}
.header-area .article-info .other-info .author-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}
.header-area .article-info .other-info .time {
  color: #969696;
  font-size: 13px;
}
.time > span {
  margin-right: 10px;
}
</style>
